<template>
	<div class="layout-pd">
		<el-container class="designer-view panel-block">
			<el-header class="sa-header">
			<div class="sa-title sa-flex sa-row-between">
				<span>设计师模板</span>
				<div>
				<el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
				</div>
			</div>
			</el-header>
			<el-main class="sa-p-0 sa-m-0" v-loading="state.loading">
			<div v-if="state.list.length > 0" class="designer-wrap sa-flex sa-flex-wrap">
				<template v-for="item in state.list" :key="item">
				<div class="item">
					<el-carousel
					trigger="click"
					height="480px"
					:autoplay="false"
					:loop="false"
					indicator-position="none"
					>
					<el-carousel-item v-for="page in item.page" :key="page">
						<saImage ref="saImageRef" :url="page.image"></saImage>
					</el-carousel-item>
					</el-carousel>
					<div class="footer">
					<div class="name">{{ item.name }}</div>
					<div class="platform sa-flex">
						<div class="label">支持平台：</div>
						<div v-if="item.platform">
						<!-- <sa-icon
							class="sa-m-r-8"
							v-for="pl in item.platform"
							:key="pl"
							:icon="'sa-shop-decorate-' + pl"
							size="20"
							:style="{
							color: platformList.filter((pf) => {
								return pf.type == pl;
							})[0].color,
							}"
						/> -->
						</div>
					</div>
					<div class="memo sa-flex">
						<div class="label">备注：</div>
						<div>{{ item.memo }}</div>
					</div>
					<div class="oper sa-flex sa-row-right">
						<el-button
						class="is-link"
						type="primary"
						@click="onUse(item.id)"
						>
						使用
						</el-button>
					</div>
					</div>
				</div>
				</template>
			</div>
			<sa-empty v-if="state.list.length == 0" />
			</el-main>
		</el-container>
	</div>
</template>

<script setup>
  import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
  
  const saImage = defineAsyncComponent(() => import('/@/components/sa/sa-image.vue'));
  const saImageRef = ref();
// import { api } from '../decorate.service';
// import { platformList } from '../page/data';

const state = reactive({
  loading: false,
  list: [],
});

async function getData() {
  state.loading = true;
  state.list = [
    {
        "id": 3,
        "name": "3C数码",
        "type": "template",
        "memo": "演示站模板",
        "platform": [
            "WechatOfficialAccount",
            "WechatMiniProgram",
            "H5",
            "App"
        ],
        "status": "disabled",
        "create_time": "2022-11-15 19:49:39",
        "update_time": "2022-11-15 19:49:39",
        "delete_time": null,
        "h5Url": "https://shopro.sheepjs.com",
        "wxacode": "https://api.shopro.sheepjs.com/shop/api/third/wechat/wxacode?platform=miniProgram&payload=%7B%22path%22%3A%22%2Fpages%2Findex%2Findex%3FtemplateId%3D17%22%7D",
        "page": [
            {
                "decorate_id": 3,
                "type": "home",
                "image": "https://file.sheepjs.com/storage/decorate/20230110/e0c0ff352b0598957cd5323978114b17.png"
            },
            {
                "decorate_id": 3,
                "type": "user",
                "image": "https://file.sheepjs.com/storage/decorate/20230104/21b7e79610d7efd03ec3188309dfd389.png"
            }
        ],
        "status_text": "已禁用",
        "type_text": "店铺模板"
    },
    {
        "id": 4,
        "name": "全品类",
        "type": "template",
        "memo": "演示站模板",
        "platform": [
            "WechatOfficialAccount",
            "WechatMiniProgram",
            "H5",
            "App"
        ],
        "status": "disabled",
        "create_time": "2022-11-15 21:23:00",
        "update_time": "2022-11-15 21:23:23",
        "delete_time": null,
        "h5Url": "https://shopro.sheepjs.com",
        "wxacode": "https://api.shopro.sheepjs.com/shop/api/third/wechat/wxacode?platform=miniProgram&payload=%7B%22path%22%3A%22%2Fpages%2Findex%2Findex%3FtemplateId%3D17%22%7D",
        "page": [
            {
                "decorate_id": 4,
                "type": "home",
                "image": "https://file.sheepjs.com/storage/decorate/20230110/56e8c4c48708bd58dfab49ff7a6c4c3a.png"
            },
            {
                "decorate_id": 4,
                "type": "user",
                "image": "https://file.sheepjs.com/storage/decorate/20230104/21b7e79610d7efd03ec3188309dfd389.png"
            }
        ],
        "status_text": "已禁用",
        "type_text": "店铺模板"
    },
    {
        "id": 5,
        "name": "端午节活动",
        "type": "template",
        "memo": "演示站模板",
        "platform": [
            "WechatOfficialAccount",
            "WechatMiniProgram",
            "H5",
            "App"
        ],
        "status": "disabled",
        "create_time": "2022-11-15 22:28:57",
        "update_time": "2023-04-12 10:51:45",
        "delete_time": null,
        "h5Url": "https://shopro.sheepjs.com",
        "wxacode": "https://api.shopro.sheepjs.com/shop/api/third/wechat/wxacode?platform=miniProgram&payload=%7B%22path%22%3A%22%2Fpages%2Findex%2Findex%3FtemplateId%3D17%22%7D",
        "page": [
            {
                "decorate_id": 5,
                "type": "home",
                "image": "https://file.sheepjs.com/storage/decorate/20230110/20d8150743178efa6fb115fa97c6c2c2.png"
            },
            {
                "decorate_id": 5,
                "type": "user",
                "image": "https://file.sheepjs.com/storage/decorate/20230104/b2196f16e95fcdb88e2994a6dee780d2.png"
            }
        ],
        "status_text": "已禁用",
        "type_text": "店铺模板"
    }	
	];
state.loading = false;
}

// async function onUse(id) {
//   api.designer.use(id);
// }


onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.designer-view {
  .designer-wrap {
    padding: 10px var(--sa-padding);
    .item {
      position: relative;
      width: 246px;
      height: 480px;
      border: 1px solid var(--sa-space);
      box-shadow: 0 0 4px rgba(89, 89, 89, 0.2);
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: var(--sa-padding);
      overflow: hidden;
      margin-right: 20px;
      img {
        width: 100%;
      }
      &:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(89, 89, 89, 0.24);
        .footer {
          opacity: 1;
        }
      }
      :deep() {
        .image-slot {
          height: 200px;
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: fit-content;
        padding: 0 12px;
        background: #fdfdfd;
        transition: all 0.5s;
        opacity: 0;
        .name {
          padding: 12px 0 4px;
          color: var(--sa-title);
          font-size: 16px;
        }
        .platform {
          height: 28px;
          font-size: 14px;
          color: var(--sa-subtitle);
        }
        .memo,
        .update-time {
          height: 20px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .label {
          flex-shrink: 0;
        }
        .oper {
          height: 36px;
          .el-button + .el-button {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
